<template>
    <z-paging
        ref="paging"
        :refresher-out-rate="0.8"
        :show-empty-view-reload-when-error="false"
        :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
        empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
        empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
        empty-view-error-text="暂无数据"
        safe-area-inset-bottom
        bg-color="#F5F8FE"
        v-model="dataList"
        @query="queryList"
    >
        <view class="cellBox">
            <view
                class="flex_wrap row_middle radioContent"
                v-for="(item, index) in dataList"
                @click="to_goodsDetail(item.id)"
            >
                <view class="flex_wrap row_between">
                    <u-image
                        :src="item.thumbnail"
                        mode="aspectFill"
                        width="180rpx"
                        height="180rpx"
                    ></u-image>
                    <view
                        class="flex_wrap flex_column row_between row_top"
                        style="padding: 8rpx 0 8rpx 26rpx"
                    >
                        <text class="goodsName breakText">{{
                            item.goodsName
                        }}</text>
                        <view class="flex_wrap">
                            <u-text
                                size="28rpx"
                                mode="price"
                                color="#FF0000"
                                :text="goodsSkuListPrice(item)"
                            />
                            <text
                                style="
                                    color: #ff0000;
                                    margin-left: 10rpx;
                                    font-size: 28rpx;
                                "
                                >起</text
                            >
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script>
import { mapGetters } from "vuex";
import { favorableGoods } from "@/api/order.js";
import { formatDecimal } from "@/utils/index.js";
import { numDiv } from "@/js_sdk/nl-precisionNum/precisionNum.js";
export default {
    computed: {
        goodsSkuListPrice() {
            return (item) => {
                const money = item.minPrice || item.price;
                return formatDecimal(numDiv(money, 100));
            };
        },
        ...mapGetters(["isLogin", "phone"]),
    },
    data() {
        return {
            infoList: [
                {
                    img: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/25/c61f6633bd394bfba8c1ab7c545a3dee.png",
                    name: "夫hi卡尔弗朗你好吉尔卡瑟芬黑咖啡回娘家就发大厦考虑的就是看见都能看见慎重考虑撒旦解放南京斯拉夫",
                },
            ],
            dataList: [],
            goodsIdSet: "",
        };
    },
    onLoad(options) {
        this.favorableId = options.favorableId;
        this.getId = options.getId;
    },
    methods: {
        async queryList(pageNo, pageSize) {
            const params = {
                pageNum: pageNo,
                pageSize: pageSize,
                favorableId: this.favorableId,
            };
            const result = await favorableGoods(params);
            this.$refs.paging.completeByTotal(
                result.data.rows,
                result.data.total
            );
        },
        to_goodsDetail(id) {
            uni.$u.route({
                url: "pages_shop1/goods/index",
                params: {
                    id: id, //商品1638409733028499457
                    getId: this.getId,
                },
            });
        },
    },
};
</script>

<style lang="scss">
.cellBox {
    width: 92vw;
    margin: 0 auto;
}
.radioContent {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 0 auto;
    padding: 28rpx 20rpx;
    box-sizing: border-box;
    margin-top: 40rpx;
}

.goodsName {
    width: 100%;
    font-size: 28rpx;
    color: #3d3d3d;
    font-weight: bold;
}

.bottomfixed {
    width: 100vw;
    height: auto;
    padding: 28rpx 40rpx;
    box-sizing: border-box;
    background-color: #fff;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
</style>
